<template>
  <div>
    <div class="edit-area marginB15">
      <span class="title">是否可见 </span>
      <el-switch v-model="xAxisConfig.xAxis.show" active-color="#13ce66"> </el-switch>
    </div>

    <div class="edit-area marginB15" v-if="division">
      <span class="title">分割间距 </span>
      <el-input-number
        class="spacing"
        v-model="xAxisConfig.series[0].barWidth"
        @change="handleChange"
        :min="30"
        :max="80"
        size="mini"
      ></el-input-number>
    </div>
    <div class="edit-area marginB15">
      <span class="title">文字样式 </span>
      <div class="font-edit">
        <el-select
          style="width: 90px"
          v-model="xAxisConfig.xAxis.axisLabel.fontFamily"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in textOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          class="mr15 marginB15"
          style="width: 90px"
          v-model="xAxisConfig.xAxis.axisLabel.fontWeight"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in textStyleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input-number
          class="spacing"
          v-model="xAxisConfig.xAxis.axisLabel.fontSize"
          @change="handleChange1"
          :min="1"
          :max="18"
          size="mini"
        ></el-input-number>

        <div class="color-picker mr15">
          <input type="text" v-model="xAxisConfig.xAxis.axisLabel.color"/>
          <el-color-picker size="mini" v-model="xAxisConfig.xAxis.axisLabel.color"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="edit-area marginB15">
      <span class="title">轴线样式 </span>
      <div class="color-picker-long">
        <input type="text" v-model="xAxisConfig.xAxis.axisLine.lineStyle.color" />
        <el-color-picker size="mini" v-model="xAxisConfig.xAxis.axisLine.lineStyle.color"></el-color-picker>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { throttle } from "lodash";
export default {
    // props:['xAxisConfig'division],
    props:{
        xAxisConfig:{
            type:Object
        },
        division:{
            type:Boolean,
            default:true
        }
    },
  data() {
    return {
      textOptions: [
        {
          value: "serif",
          label: "微软雅黑"
        },
        {
          value: "monospace",
          label: "方正"
        }
      ],
      textStyle: "正常",
      textStyleOptions: [
        {
          value: "normal",
          label: "正常"
        },
        {
          value: "bold",
          label: "加粗"
        },
        {
          value: "lighter",
          label: "细体"
        }
      ]
    };
  },
  methods: {
    handleChange() {},
    handleChange1() {},
    addHistory() {
				// console.log('common style change addHistoryCache')
				this.$store.dispatch('addHistoryCache')
			},
  },
  created() {
    this.throttleAddHistory = throttle(this.addHistory, 3000);
  },
  computed: {
    ...mapState({
      // 	projectData: state => state.editor.projectData,
      // 	activePageUUID: state => state.editor.activePageUUID,
      // 	activeElementUUID: state => state.editor.activeElementUUID,
      //activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement",
    ]),
  }
};
</script>

<style lang='scss' scoped>
.edit-area {
  display: flex;
  width: 300px;
  .right {
    margin-right: auto;
  }
  .color-picker-long {
    display: inline-block;
    width: 195px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    input {
      outline: transparent;
      border: transparent;
      // width: 60px;
      padding-left: 10px;
    }
  }
  .font-edit {
    width: 230px;
    display: flex;
    flex-flow: wrap;
    .color-picker {
      display: inline-block;
      width: 90px;
      display: flex;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      input {
        outline: transparent;
        border: transparent;
        width: 60px;
        padding-left: 10px;
      }
    }
  }
}
.mr15 {
  margin-left: 15px;
}
.spacing {
  width: 90px;
}
.title {
  width: 70px;
}
</style>